<template>
    <div class="boxs">

        <el-card class="box-card">
            <div class="tops">
                <!-- 顶部搜索添加按钮 -->
                <div class="ls">
                    <!-- 起始时间 -->
                    <span>活动时间&nbsp;</span>&emsp13;
                    <el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30'
                    }">
                    </el-time-select> &nbsp;
                    <!-- 结束时间 -->
                    <el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30',
                        minTime: startTime
                    }">
                    </el-time-select>&nbsp;
                    <!-- 左边搜索按钮 -->
                    <el-button type="primary" @click="search">搜索</el-button>
                </div>
                <div class="cex"></div>

                <!-- 右边添加按钮 -->
                <div class="rgs">
                    <el-button type="primary" @click="adds">添加</el-button>
                </div>
                <!-- 弹出框 -->

            </div>
            <!-- 表格 -->
            <el-table ref="singleTable" :data="list" highlight-current-row @current-change="handleCurrentChange"
                style="width: 150%">
                <el-table-column type="index" width="150px" label="序号">
                </el-table-column>
                <el-table-column property="type" label="创建日期" width="150px">
                    <template slot-scope="scope">
                        {{ scope.row.date | filterdate }}
                    </template>
                    <!-- 时间转换 -->
                </el-table-column>
                <el-table-column prop="describe" label="收支类型" width="100px">
                </el-table-column>
                <el-table-column prop="income" label="收支描述" width="100px">
                </el-table-column>
                <el-table-column prop="expend" label="收入" width="100px">
                </el-table-column>
                <el-table-column prop="cash" label="支出" width="100px">
                </el-table-column>
                <el-table-column prop="remark" label="描述" width="100px">
                </el-table-column>
                <el-table-column prop="operate" label="操作" width="160px">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 删除弹框 -->
            <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
                <span>你确定要删除吗？</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="no">取 消</el-button>
                    <el-button type="primary" @click="yes">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 分页 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage1" :page-sizes="[3, 5, 10, 20]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-card>

        <!-- 添加判断表单 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <!-- 收支类型 -->
                <el-form-item label="收支类型">
                    <el-select v-model="ruleForm.type" placeholder="选择收支类型" float="left">
                        <el-option label="提现" value="提现"></el-option>
                        <el-option label="提现手续费" value="提现手续费"></el-option>
                        <el-option label="充值" value="充值"></el-option>
                        <el-option label="优惠券" value="优惠券"></el-option>
                        <el-option label="充值礼券" value="充值礼券"></el-option>
                        <el-option label="转账" value="转账"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 收支描述 -->
                <el-form-item label="收支描述" prop="describe">
                    <el-input v-model="ruleForm.describe"></el-input>
                </el-form-item>
                <!-- 收入 -->
                <el-form-item label="收入" prop="expend">
                    <el-input v-model="ruleForm.expend"></el-input>
                </el-form-item>
                <!-- 支出 -->
                <el-form-item label="支出" prop="income">
                    <el-input v-model="ruleForm.income"></el-input>
                </el-form-item>
                <!-- 账户现金 -->
                <el-form-item label="账户现金" prop="cash">
                    <el-input v-model="ruleForm.cash"></el-input>
                </el-form-item>
                <!-- 备注 -->
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="ruleForm.remark" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改判断表单 -->
        <el-dialog title="提示" :visible.sync="dialogVisible2" width="50%" :before-close="handleClose">
            <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <!-- 收支类型 -->
                <el-form-item label="收支类型">
                    <el-select v-model="ruleForm2.type" placeholder="选择收支类型">
                        <el-option label="提现" value="提现"></el-option>
                        <el-option label="提现手续费" value="提现手续费"></el-option>
                        <el-option label="充值" value="充值"></el-option>
                        <el-option label="优惠券" value="优惠券"></el-option>
                        <el-option label="充值礼券" value="充值礼券"></el-option>
                        <el-option label="转账" value="转账"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 收支描述 -->
                <el-form-item label="收支描述" prop="describe">
                    <el-input v-model="ruleForm2.describe"></el-input>
                </el-form-item>
                <!-- 收入 -->
                <el-form-item label="收入" prop="expend">
                    <el-input v-model="ruleForm2.expend"></el-input>
                </el-form-item>
                <!-- 支出 -->
                <el-form-item label="支出" prop="income">
                    <el-input v-model="ruleForm2.income"></el-input>
                </el-form-item>
                <!-- 账户现金 -->
                <el-form-item label="账户现金" prop="cash">
                    <el-input v-model="ruleForm2.cash"></el-input>
                </el-form-item>
                <!-- 备注 -->
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="ruleForm2.remark" placeholder="请输入内容"></el-input>
                </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="submitForm2('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改判断表单 -->
    </div>
</template>
<script>
import { adds, fetch, del, edit } from '../request/api'
export default {
    data() {
        return {
            // 删除弹框
            dialogVisible1: false,
            // 添加弹框
            dialogVisible: false,
            // 修改弹框
            dialogVisible2: false,
            // 起始时间
            startTime: '',
            // 结束时间
            endTime: '',
            // 表单
            tableData: [{
                // 创建日期
                type: '',
                // 收支类型
                describe: '',
                // 收支描述
                income: '',
                // 收入
                expend: '',
                // 支出
                cash: '',
                // 描述
                remark: '',
            }
            ],
            // 弹出框
            dialogVisible: false,
            // 表单验证
            ruleForm: {
                //收支类型
                type: '',
                // 收支描述
                describe: '',
                // 支出
                expend: '',
                // 收入
                income: '',
                // 账户现金
                cash: '',
                // 描述
                remark: ''
            },
            // 修改表单
            ruleForm2: {
                //收支类型
                type: '',
                // 收支描述
                describe: '',
                // 支出
                expend: '',
                // 收入
                income: '',
                // 账户现金
                cash: '',
                // 描述
                remark: ''
            },
            // 添加表单正则
            rules: {
                // 收入描述
                describe: [
                    { required: true, message: '收入描述不能为空', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                // 收入
                expend: [
                    { required: true, message: '支出不能为空', trigger: 'change' }
                ],
                // 支出
                income: [
                    { required: true, message: '收入不能为空', trigger: 'change' }
                ],
                // 账户现金
                cash: [
                    { required: true, message: '账户现金不能为空', trigger: 'change' }
                ]
            },
            // 修改表单正则
            rules2: {
                // 收入描述
                describe: [
                    { required: true, message: '收入描述不能为空', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                // 收入
                expend: [
                    { required: true, message: '支出不能为空', trigger: 'change' }
                ],
                // 支出
                income: [
                    { required: true, message: '收入不能为空', trigger: 'change' }
                ],
                // 账户现金
                cash: [
                    { required: true, message: '账户现金不能为空', trigger: 'change' }
                ]
            },
            list: [],
            // 编辑id
            idx: 0,
            // 分页 当前页码
            currentPage1: 1,
            // 每页几条
            total: null,
            // 每页最多显示几个
            pageSize: 5
        }
    },
    filters: {
        filterdate(value) {
            return new Date(value).toLocaleString()
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 搜索
        search(){
            console.log('搜索');
        },
        // 修改
        submitForm2() {
            this.dialogVisible2 = false
            // console.log('编辑');
            // console.log(this.idx);
            edit({ ...this.ruleForm2, id: this.idx }).then(res => {
                console.log(res);
                console.log(this.idx);
            })
        },
        getList() {
            fetch().then(res => {
                this.list = res.data.slice((this.currentPage1 - 1) * this.pageSize, this.currentPage1 * this.pageSize)
                this.total = res.data.length
            })
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        // 添加模态框
        adds() {
            this.dialogVisible = true
        },
        // 修改模态框
        edits() {
            this.dialogVisible2 = true
        },
        // 修改
        handleEdit(index, row) {
            this.idx = row._id
            // console.log(index, row._id);
            this.ruleForm2 = row
            this.dialogVisible2 = true
        },
        // 删除
        handleDelete(a) {
            // console.log(index, row);
            console.log(a);
            this.dialogVisible1 = true
            del(a._id).then(res => {
                this.getList()
            })
        },
        // 确定删除
        yes() {
            this.$message({
                message: '删除成功！',
                type: 'success'
            });
            this.dialogVisible1 = false
        },
        // 取消删除
        no() {
            this.$message({
                message: '已取消删除！',
                type: 'warning'
            });
            this.dialogVisible1 = false
        },
        // 分页
        handleSizeChange(val) {
            this.pageSize = val
            console.log(`每页 ${val} 条`);
            this.getList()
        },
        handleCurrentChange(val) {
            this.currentPage1 = val
            console.log(`当前页: ${val}`);
            this.getList()
        },
        // 弹出框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 表单验证 添加数据
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogVisible = false
                    adds(this.ruleForm).then(res => {
                        console.log(res.data);
                        console.log(this.ruleForm);
                        if (res.status == 200) {

                            this.getList()
                            this.$message({
                                message: '添加成功！',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '添加失败',
                                type: 'warning'
                            });
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 表单验证 修改数据
        submitFor2(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogVisible = false
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
}
</script>
<style lang="scss" scoped>
.boxs {
    .tops {
        display: flex;
        padding: 0 20px;
        justify-content: space-around;
        margin: 20px 0;

        .cex {
            width: 300px;
        }
    }

    // 分页
    .block {
        margin: 50px 0 20px 0;
        float: right;
    }
}

.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.dialog-footer {
    overflow: hidden;
}
</style>